<script setup lang="ts">
import { fetchLearningDynamicApi } from '@/api/MicroScene/MicroSceneApi';
import type { LearningDynamicType } from '@/types/micro-scene';
import { defineProps, onMounted, ref, watch } from 'vue';
import { Empty } from 'ant-design-vue';

const props = defineProps<{
  areaId: string;
}>();

const learningDynamicList = ref<LearningDynamicType[]>([]);

// 添加计算相对时间的函数
const calculateRelativeTime = (timestamp: string): string => {
  const now = Date.now();
  const date = new Date(timestamp);
  const diff = now - date.getTime();

  // 转换为秒、分钟、小时、天
  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0)
    return `${days}天前`;
  if (hours > 0)
    return `${hours}小时前`;
  if (minutes > 0)
    return `${minutes}分钟前`;
  return '刚刚';
};

// 刷新数据的函数
const refreshData = async () => {
  try {
    const res = await fetchLearningDynamicApi({ areaId: Number(props.areaId), num: 10 });
    learningDynamicList.value = res || [];
  }
  catch (error) {
    console.error('获取学习动态失败:', error);
    learningDynamicList.value = [];
  }
};

// 监听 props.areaId 的变化
watch(
  () => props.areaId,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      // 在获取新数据之前先清空旧数据
      learningDynamicList.value = [];
      refreshData();
    }
  },
  { immediate: true, deep: true },
);

onMounted(async () => {
  await refreshData();
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: transparent;">
    <span style="font-size: 1.5rem; font-weight: bold; color: black; position: relative; width: fit-content;">
      学习动态
      <img
        src="@/assets/title_star.svg"
        alt="学习动态"
        style="width: 1.5rem; height: 1.5rem; position: absolute; right: -2rem;"
      >
    </span>

    <div style="display: flex; flex-direction: column; background-color: white; border-radius: 0.5rem; margin-top: 0.5rem;">
      <template v-if="learningDynamicList.length > 0">
        <div style="padding: 0.5rem;">
          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <div v-for="(dynamic, index) in learningDynamicList" :key="dynamic.sceneId">
              <div style="display: flex; flex-direction: row; align-items: flex-start;">
                <a-avatar
                  :src="dynamic.user.userImage || ''"
                  :alt="dynamic.user.realname || '未知用户'"
                  style="width: 1.5rem; height: 1.5rem; margin-right: 0.5rem;"
                  shape="circle"
                />
                <div style="display: flex; flex-direction: column; min-width: 0; flex: 1;">
                  <span style="font-size: 0.8rem; color: #999;">{{ dynamic.user.realname || '未知用户' }}</span>
                  <span
                    style="
                      font-size: 0.8rem;
                      color: #999;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >{{ dynamic.user.userCollege || '未知学院' }}</span>
                  <span
                    style="
                      font-size: 0.8rem;
                      color: black;
                      font-weight: bold;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      line-clamp: 1;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      line-height: 1.2rem;
                      margin-top: 0.2rem;
                    "
                  >学习了微场景《{{ dynamic.sceneTitle }}》</span>
                </div>

                <span style="font-size: 0.8rem; color: #999; margin-left: 1rem; white-space: nowrap;">
                  {{ calculateRelativeTime(dynamic.startTime) }}
                </span>
              </div>

              <a-divider
                v-if="index !== learningDynamicList.length - 1"
                style="margin: 0rem; margin-top: 0.2rem; border-color: grey; border-width: 1px;"
              />
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <a-empty
          :image="Empty.PRESENTED_IMAGE_SIMPLE"
          description="当前专区暂无学习动态"
        />
      </template>
    </div>
  </a-layout>
</template>

<style scoped lang="scss">

</style>
